 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
     background: linear-gradient(20deg, #b1dbf0, #9b7eeb);
 }

 ::-webkit-scrollbar-track {
     background: transparent;
     //  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
     //  border-radius: 0;
     //  background: rgba(0, 0, 0, .02);
 }

 .body-bg {
     width: 100%;
     height: 100vh;
     background-image: url('../images/bg01.jpg');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     filter: blur(60px);
     opacity: .8;
     position: fixed;
     z-index: -10;
     top: 0;
     left: 0;
 }

 .container {
     width: 100%;
     max-width: 768px;
     height: 100%;
     max-height: 720px;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: #fff;
     border-radius: 6px;
     box-shadow: 1px 2px 8px rgba(0, 0, 0, .2);
     overflow: hidden;
 }

 @media (max-width: 768px) {
     .container {
         max-width: 100%;
         max-height: 100%;
         box-shadow: none;
         border-radius: 0;
     }
 }

 .up-part {
     position: absolute;
     width: 100%;
     height: calc(100% - 200px);
     background: #f3f3f3;
     top: 0;
     left: 0;

     .chat-header {
         width: 100%;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         user-select: none;
         position: relative;
         background: #f9f9f9;


         .whispers {
             position: absolute;
             left: 20px;
             top: 0;
             height: 40px;
             display: flex;
             align-items: center;
             font-size: 14px;
             color: #666;

             .box {
                 width: 60px;
                 height: 30px;
                 background: #f8f8f8;
                 border-radius: 30px;
                 margin-right: 5px;
                 position: relative;
                 cursor: pointer;
                 box-shadow: 0 0 1px 1px rgba(0, 0, 0, .08) inset;

                 &::after {
                     content: '';
                     position: absolute;
                     width: 26px;
                     height: 26px;
                     border-radius: 26px;
                     background: #ccc;
                     box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
                     position: absolute;
                     left: 2px;
                     top: 2px;
                     transition: .15s linear;
                 }

                 &.active {
                     &::after {
                         left: 32px;
                         background: #1c99a0;
                     }
                 }
             }
         }

         .status {
             width: 100%;
             height: 40px;
             line-height: 40px;
             text-align: center;
             font-size: 12px;
             color: #bbb;


             &.close {
                 color: #f33;
             }
         }
     }

     @media (max-width: 768px) {

        .chat-header {
            padding: 0 12px;
            justify-content: space-between;

            .whispers {
                position: static;
                left: 0;
                top: 0;
            }

            .status {
                width: auto;
            }
        }
    }


     .chat-wrap {
         position: absolute;
         width: 100%;
         height: calc(100% - 40px);
         padding: 20px;
         top: 40px;
         left: 0;
         overflow-y: scroll;
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
     }

     .chat-box {
         width: 100%;
         height: auto;
         margin-top: 15px;
         display: flex;
         flex-wrap: wrap;

         &:nth-child(1) {
             margin-top: 0;
         }

         .nickname-time {
             width: 100%;
             line-height: 1;
             display: flex;
             align-items: center;
             color: #888;
             font-size: 12px;
             margin-bottom: 5px;

             .time {
                 margin: 0 10px;
                 color: #aaa;
                 font-size: 10px;
             }
         }

         &.left {
             .time {
                 justify-content: flex-start;
             }

             .nickname-time {
                 padding-left: 50px;
             }

             .content-box {
                 &::after {
                     left: -15px;
                 }
             }
         }

         &.right {
             flex-direction: row-reverse;

             .nickname-time {
                 flex-direction: row-reverse;
                 padding-right: 50px;
             }

             .content-box {
                 margin-left: 0;
                 margin-right: 10px;
                 background: #33b0c5;
                 color: #fff;

                 &::after {
                     border-right-color: #33b0c5;
                     transform: rotate(180deg);
                     right: -15px;
                 }
             }

             .img-box {
                 margin-left: 0;
                 margin-right: 10px;
             }


         }
     }

     .headimg {
         width: 40px;
         height: 40px;
         border-radius: 40px;
         background: #86acb9;
         background-repeat: no-repeat;
         background-size: 100% 100%;
         background-position: center center;

         overflow: hidden;
         margin-top: -15px;
     }

     .content-box {
         width: auto;
         max-width: calc(100% - 60px);
         padding: 15px;
         background: #fff;
         border-radius: 10px;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, .05);
         margin-left: 10px;

         word-break: break-all;
         clear: both;
         position: relative;

         &::after {
             position: absolute;
             content: '';
             display: block;
             width: 0;
             height: 0;
             border-top: solid 7px transparent;
             border-left: solid 8px transparent;
             border-bottom: solid 7px transparent;
             border-right: solid 8px #fff;
             border-radius: 2px;
             top: 10px;
             z-index: 1;
         }

         .txt {
             line-height: 20px;
             min-height: 20px;
             font-size: 15px;
         }
     }

     .img-box {
         display: block;
         width: auto;
         height: auto;
         position: relative;

         .img {
             display: inline-block;
             width: auto;
             height: 100px;
             border-radius: 6px;
             overflow: hidden;
             margin-left: 10px;
         }

         .iconfont {
             display: inline-block;
             width: 24px;
             height: 24px;
             text-align: center;
             line-height: 24px;
             font-size: 18px;
             position: absolute;
             bottom: 10px;
             color: #aaa;
             transform: rotate(0);
             animation: loading 1s linear infinite;

             left: -24px;
         }
     }
 }

 @keyframes loading {
     0% {
         transform: rotate(0);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .under-part {
     position: absolute;
     width: 100%;
     height: 200px;
     background: #f9f9f9;
     left: 0;
     bottom: 0;
     border-top: solid 1px #ededed;

     .more-feature {
         width: 100%;
         height: 40px;
         padding: 0 10px;
         display: flex;
         align-items: center;

         .box {
             display: inline-block;
             width: 40px;
             height: 40x;
             text-align: center;
             line-height: 40px;
             cursor: pointer;
             transition: .05s linear;

             &:active {
                 transform: scale(.95);
             }

             input[type='file'] {
                 display: none;
             }

             .iconfont {
                 color: #aaa;
                 font-size: 20px;
             }
         }
     }

     textarea {
         position: absolute;
         width: 100%;
         max-width: 100%;
         min-width: 100%;
         height: calc(100% - 95px);
         max-height: calc(100% - 95px);
         min-height: calc(100% - 95px);
         border: none;
         outline: none;
         top: 40px;
         left: 0;
         padding: 5px 20px;
         background: transparent;
         font-size: 15px;
     }

     .btn-wrap {
         width: 100%;
         height: 55px;
         padding: 0 10px;

         display: flex;
         align-items: center;
         justify-content: flex-end;

         position: absolute;
         bottom: 0;
         right: 0;

         .btn {
             width: 64px;
             height: 30px;
             border-radius: 6px;
             background: #1c99a0;
             color: #fff;
             border: none;
             outline: none;
             font-size: 13px;
             cursor: pointer;
             transition: .1s linear;

             &:hover {
                 background: #0a6e74;
             }

             &:active {
                 box-shadow: 1px 2px 6px rgba(0, 0, 0, .3) inset;
             }
         }
     }
 }